<template>
  <div class="allpage">
    <!-- 团长活动 -->
    <el-form :inline="true" class="act-top form-style" :model="form" ref="form">
      <el-row>
        <el-col :span="6">
          <el-form-item label="团长：" style="margin:10px 0 10px 20px">
            {{ form.SalesManName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="margin:10px 0">
            <el-button @click="choose" icon="el-icon-circle-plus"
              >点击选择</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="margin:10px 0">
            <el-input
              v-model="form.input1"
              placeholder="团购主题"
              :label-width="formLabelWidth"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item  style="margin:10px 0">
            <el-date-picker
              type="date"
              v-model="form.time"
              @change="getSTime"
              placeholder="发布日期"
              value-format="yyyy-MM-dd"
              class="input"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        
        <el-col :span="8">
          <el-form-item label="团购状态：" style="margin:10px 0 10px 20px">
            <el-select v-model="form.value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="margin:10px 0">
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-style">
      <el-table :data="tableData" border>
        <el-table-column prop="GBNumber" label="团购码"></el-table-column>
        <el-table-column
          prop="GroupBuyTitle"
          label="团购主题"
        ></el-table-column>
        <el-table-column label="团购内容" width="130">
          <template slot-scope="scope">
            <div class="act-mid-img" v-show="scope.row.GroupBuyContent">
              <el-image
                v-image-preview
                style="width: 50px; height: 50px"
                v-for="(item, index) in scope.row.GroupBuyContent.split('|')"
                :key="index"
                :src="item"
                class="photo"
              ></el-image>
            </div>
            <div v-show="scope.row.GroupBuyContent ===''" style="color:red">此活动无图</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="GroupBuyStartTime"
          label="活动开始时间"
        ></el-table-column>
        <el-table-column
          prop="GroupBuyEndTime"
          label="活动结束时间"
        ></el-table-column>
        <el-table-column label="团长">-</el-table-column>
        <el-table-column label="团购状态">
          <template slot-scope="scope">
            <p v-show="scope.row.GroupBuyStatus === 0">未发布</p>
            <p v-show="scope.row.GroupBuyStatus === 1" style="color:red">已发布</p>
            <p v-show="scope.row.GroupBuyStatus === 2" style="color:green">已结束</p>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="发布时间"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                size="mini"
                @click="edit(scope.$index, scope.row.GBNumber)"
                >查看</el-button
              >
              <el-button type="danger" size="mini" @click="del(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
      <act-dialog
        :dTitle="dialogTitle"
        :visible="dialogFormVisible"
        @getusername="getSalesManName"
        @closeDialog="close"
      />
    </div>
  </div>
</template>

<script>
import ActDialog from "./ActDialog";
import bus from "@/components/homepage/children/bus";
import Botpage from "@/components/botpage/Botpage";
import { ProductApi, DeleteGroupBuy } from "@/request/api";
export default {
  components: {
    ActDialog,
    Botpage,
  },
  created() {
    this.getTableData();
  },
  methods: {
    del(row) {
      if (row.GBNumber) {
        this.$confirm("是否要删除该条信息?", "删除提示", {})
          .then((res) => {
            DeleteGroupBuy({
              GBNumber: row.GBNumber,
            }).then((res) => {
              if (res.Message) {
                this.getTableData();
                this.$confirm("该条信息删除成功！", "删除成功", {});
              }
            });
          })
          .catch((res) => {
            console.log(res);
          });
      }
    },
    getSalesManName(msg) {
      console.log(msg + "-------------------");
      this.form.SalesManName = msg;
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableData();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableData();
    },
    getTableData() {
      ProductApi({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        ScreenValues: "B",
        SreachValues: this.form.input1,
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
           var that = this;
          for ( let i in this.tableData ) {
            that.tableData[i].CreateTime = this.tableData[i].CreateTime.replace(/(\/)/g,'-');
            that.tableData[i].GroupBuyEndTime = this.tableData[i].GroupBuyEndTime.replace(/(\/)/g,'-');
            that.tableData[i].GroupBuyStartTime = this.tableData[i].GroupBuyStartTime.replace(/(\/)/g,'-');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      this.getTableData();
    },
    async edit(index, id) {
      console.log(id);
      this.$router.push({
        path: "/directly/addeventpage",
        query: { GBNumber: id },
      });
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableData();
      }
    },
    choose() {
      this.dialogFormVisible = true;
      this.dialogTitle = "选择团长";
      this.form = {};
    },
    getSTime(val) {
      this.form.time = val;
    },
  },
  data() {
    return {
      currentPage: 1,
      PageSize: 10,
      total: 1,
      formLabelWidth: "100px",
      dialogTitle: "",
      dialogFormVisible: false,
      form: {},
      tableData: [],
      options: [
        { value: 1, label: "已发布" },
        { value: 2, label: "已结束" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.act-mid-img {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
.photo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
}
</style>